<template>
  <div class="Fourmode">
    <section class="mainTop">
      <div class="reply_programe" v-for="(item,index) in reply" :key="index">
        <video-player
          class="vjs-custom-skin"
          ref="videoPlayer"
          @ready="onPlayerReadied"
          :options="playerOptions[index]"
          :playsinline="true"
        ></video-player>
      </div>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/subonlinedevice/fourmode.js"></script>

<style lang="scss">
.Fourmode {
  > section {
    &.mainTop {
      .reply_programe {
        width: 100%;
        .video-player {
          .video-js {
            margin-top: 1%;
            margin-left: 4%;
            width: 45%;
            padding-top: 15%;
            float: left;
            flex-flow: wrap;
            background-color: #161836;
            display: flex;
            height: 366px;
            .vjs-control-bar {
              width: 89%;
            }
            .vjs-big-play-button{
              left:45%;
            }
          }
          .vjs-tech {
            width: 89%;
          }

          .vjs-modal-dialog {
            width: 90%;
          }

          .vjs-modal-dialog-content {
            width: 90%;
            margin-left:5%;
          }

          .vjs-poster {
            background-position: 0% 0%;
            height: 100%;
            width: 90%;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
